<template>
    <div class="mainItems">
        <div class="boxmock" v-loading="loading" v-if="loading" :class="loading ? 'blurView' : ''"></div>
        <div class="mci mci1" @click="changemIndex(0)">
            <Grid style="margin-left: -10px;" color="#ee6aff" />
            <div class="mcic">
                <p class="mcict">入院数据</p>
                <CountTo class="mcicn" :startVal='0' :endVal='mainData.ruyuan' :duration='3000' />人
            </div>
        </div>
        <div class="mci mci2" @click="changemIndex(1)">
            <Cardio style="margin-left: -10px;" color="#ee6aff" />
            <div class="mcic">
                <p class="mcict">住院数据</p>
                <CountTo class="mcicn" :startVal='0' :endVal='mainData.zhuyuan' :duration='3000' />人
            </div>
        </div>
        <div class="mci mci3" @click="changemIndex(2)">
            <Quantum color="#ee6aff" />
            <div class="mcic">
                <p class="mcict">出院数据</p>
                <CountTo class="mcicn" :startVal='0' :endVal='mainData.chuyuan' :duration='3000' />人
            </div>
        </div>
        <div class="mci mci4" @click="changemIndex(3)">
            <Mirage color="#ee6aff" />
            <div class="mcic">
                <p class="mcict">门诊数据</p>
                <CountTo class="mcicn" :startVal='0' :endVal='mainData.menzhen' :duration='3000' />人
            </div>
        </div>
        <div :class="['mbb', 'mbb' + mIndex]"></div>

        <div :class="['mbi', 'mbi' + mIndex]"> </div>
    </div>
</template>

<script>
import {fetchGet} from '@/api/request'
import CountTo from 'vue-count-to'
import Helix from './loadComponents/helix.vue'
import Cardio from './loadComponents/cardio.vue'
import Grid from './loadComponents/grid.vue'
import Quantum from './loadComponents/quantum.vue'
import Mirage from './loadComponents/mirage.vue'

export default {
    props: ['hIndex', 'dIndex', 'mIndex'],
    components: {
        CountTo, Helix, Cardio, Grid, Quantum, Mirage
    },
    data() {
        return {
            loading: false,
            mainData: {
                ruyuan: 142,
                chuyuan: 26,
                zhuyuan: 31,
                menzhen: 361,
            }
        }
    },
    methods: {
        changemIndex(index) {
            this.$emit("changeMcIndex", index)
        }
    }
}
</script>

<style lang="scss" scoped>
.mainItems {
    width: 1000px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    .mci {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 240px;
        height: 60px;
        box-shadow: 0 0 12px #00000088;
        border-radius: 12px;
        cursor: pointer;
        transition: all .8s;

        &:hover {
            background-size: 200% 200%;
            background-position: -100% -100%;
        }

        img {
            width: 40px;
            height: 40px;
            margin-right: 30px;
            opacity: .7;
        }

        .mcic {
            margin-left: 20px;
            color: #fff;
            font-family: 'PMZD';

            .mcict {
                color: #fff;
                font-size: 20px;
                font-family: 'YSBTH';
                letter-spacing: 3px;
            }

            .mcicn {
                font-size: 26px;
                letter-spacing: 3px;
                color: #fff;
                font-family: 'SJYHJT';
            }
        }
    }

    .mci1 {
        background: linear-gradient(to right, #d268ff88, #a666ff88);
    }

    .mci2 {
        background: linear-gradient(to right, #a666ff88, #768fff88);
    }

    .mci3 {
        background: linear-gradient(to right, #768fff88, #6a4eff88);
    }

    .mci4 {
        background: linear-gradient(to right, #6a4eff88, #d268ff88);
    }
}

.mbi {
    position: absolute;
    bottom: -600px;
    border-radius: 12px;
    left: 0;
    width: 100%;
    height: 580px;
    z-index: -1;
}

.mbi0 {
    background: linear-gradient(to bottom, #d268ff11, #a666ff11);
}

.mbi1 {
    background: linear-gradient(to bottom, #a666ff11, #768fff11);
}

.mbi2 {
    background: linear-gradient(to bottom, #768fff11, #6a4eff11);
}

.mbi3 {
    background: linear-gradient(to bottom, #6a4eff11, #d268ff11);
}

.mbb {
    width: 389px;
    height: 108px;
    position: absolute;
    z-index: -1;
    bottom: -57px;
    opacity: .6;
    background-image: url('../../assets/guang1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

.mbb0 {
    left: -70px;
}

.mbb1 {
    left: 185px;
}

.mbb2 {
    left: 437px;
}

.mbb3 {
    left: 696px;
}
</style>